<template>
  <div class="left-chart-1">
    <dv-border-box-13>
      <div class="lc1-header">蜂厂信息</div>
      <dv-decoration-2 style="height:10px;" />
      <div>
        <table class="d-table">
          <tr>
            <td>
              <div class="info-container">
                <img src="./img/数量.png" class="icon" />
                <div class="info-text">蜂厂总数：
                  <span class="value">1</span>
                </div>
              </div>
            </td>
            <td>
              <div class="info-container">
                <img src="./img/box.png" class="icon" />
                <div class="info-text">蜂箱总数：
                  <span class="value">2</span>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="info-container">
                <img src="./img/农民-copy-copy.png" class="icon" />
                <div class="info-text">养蜂人：
                  <span class="value">5</span>
                </div>
              </div>
            </td>
            <td>
              <div class="info-container">
                <img src="./img/总产量.png" class="icon" />
                <div class="info-text">总产量：
                  <span class="value">0.0</span>
                </div>
              </div>
            </td>~
          </tr>
          <tr>
            <td>
              <div class="info-container">
                <img src="./img/预警次数.png" class="icon" />
                <div class="info-text">预警次数：
                  <span class="value">1</span>
                </div>
              </div>
            </td>
            <td></td>
          </tr>
        </table>
      </div>
    </dv-border-box-13>
  </div>
</template>

<script>
export default {
  name: 'LeftChart1',
  data() {
    return {
      config: {
        data: [],
        colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
        unit: '件'
      }
    }
  }
}
</script>

<style lang="less">
.d-table {
  width: 280px;
  height: 150px;
  border-collapse: collapse;
  /* 表格边框合并为一个边框 */
  margin-top: 10px;
}

.d-table td {
  width: 120px;
  height: 35px;
  overflow: hidden;
  /* 超出内容隐藏 */
  text-overflow: ellipsis;
  /* 溢出文本用省略号表示 */
  white-space: nowrap;
  /* 文本不换行 */
  text-align: center;
  /* 单元格内容居中对齐 */
}

.info-container {
  display: flex;
  /* 使用弹性布局 */
  align-items: center;
  /* 垂直居中对齐 */
}

.icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  vertical-align: middle;
  /* 图标垂直居中 */
}

.info-text {
  color: aquamarine;
  font-size: 15px;
  margin-top: 5px;
  margin-right: 5px;
}

.value {
  color: gold;
  font-size: 17px;
  margin-top: 10px;
}

.left-chart-1 {
  width: 100%;
  height: 37%;
  display: flex;
  flex-grow: 0;
  flex-direction: column;
  /* 纵向排列 */

  .lc1-header {
    height: 20px;
    text-indent: 20px;
    font-size: 20px;
    font-weight: bold;
    color: rgb(81, 119, 243);
  }

  .lc1-details {
    height: 50px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    text-indent: 20px;
    color: rgb(78, 205, 228);

    p {
      color: white;
      font-size: 25px;
    }

    span {
      color: white;
      font-weight: bold;
      font-size: 15px;
      margin-left: 20px;
    }
  }

  .lc1-chart {
    flex: 1;
    /* 在可用空间内伸展 */
  }
}
</style>
